// src/components/Header.js
import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'

export default function Header () {
    const dispatch = useDispatch()
    const authReducer = useSelector(state => state.authReducer)
    useEffect(() => {
        const token = localStorage.getItem('token')
        // 根据 token 获取用户状态
        if (token) {
            dispatch({
                type: 'loadUser',
                payload: token
            })
        }
    }, [])
    return (
        <nav className="navbar navbar-light">
            <div className="container">
                <a className="navbar-brand" href="index.html">conduit</a>
                <ul className="nav navbar-nav pull-xs-right">
                    <li className="nav-item">
                        {/* Add "active" class when you're on that page" */}
                        <a className="nav-link active">Home</a>
                    </li>
                    { authReducer.success ? <Login username={authReducer.user.username} /> : <Logout /> }
                </ul>
            </div>
        </nav>
    )
}

// 已登录显示的链接
function Login ({ username }) {
    return (
        <>
            <li className="nav-item">
                <a className="nav-link">
                    <i className="ion-compose" />&nbsp;New Post
                </a>
            </li>
            <li className="nav-item">
                <a className="nav-link">
                    <i className="ion-gear-a" />&nbsp;Settings
                </a>
            </li>
            <li className="nav-item">
                <a className="nav-link">
                    <i className="ion-gear-a" />&nbsp;{ username }
                </a>
            </li>
        </>
    ) 
}

// 未登录显示的链接
function Logout () {
    return (
        <>
            <li className="nav-item">
                <a className="nav-link">Sign in</a>
            </li>
            <li className="nav-item">
                <a className="nav-link">Sign up</a>
            </li>
        </>
    )
}